<template>
  <div>
    <el-table
      border
      :data="dataSource"
      :stripe="stripe"
      :height="tableHeight"
      :highlight-current-row="islightRow"
      :cell-class-name="cellClassName"
      @row-click="rowClick"
      @select="select"
      @selection-change="selectionChange"
      @sort-change="sortChange"
      >
      <!--选择-->
      <el-table-column
        v-if="hasSelection"
        type="selection"
        align="center"
        width="55">
      </el-table-column>
      <!--序号-->
      <el-table-column
        v-if="hasIndex"
        type="index"
        width='55'>
      </el-table-column>
      <!--数据源-->
      <el-table-column
        v-for="column in columns"
        v-if="column.hasShow"
        header-align="center"
        :show-overflow-tooltip="tooltip"
        :sortable="column.hasSort"
        :key="column.prop"
        :prop="column.prop"
        :label="column.label"
        :fixed="column.fixed"
        :align="column.align"
        :width="column.width"
        :formatter="column.formatter"
        :class-name="column.className">
      </el-table-column>
      <!--操作-->
      <el-table-column label="操作" align="center" v-if="operation.length > 0">
        <template slot-scope="scope">
          <el-button v-for="list in operation" :key="list.id"
            :type="list.type"
            :size="list.size"
            @click.stop="operationClick(scope.$index, scope.row, list.id)">
            {{list.text}}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页功能-->
    <br/>
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="pageSizes"
      :page-size="dpageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalCount">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: 'xnzw-table',
  data () {
    return {
      currentPage: 1,
      dpageSize: 25,
      // 是否高亮显示当前行
      islightRow: false,
      // 内容超长后，影藏内容，显示tooltip
      tooltip: true,
      stripe: true
    }
  },
  props: {
    // 是否有选择框
    hasSelection: {
      type: Boolean,
      default: function () {
        return false
      }
    },
    // 是否有索引
    hasIndex: {
      type: Boolean,
      default: function () {
        return false
      }
    },
    // 表格的列
    columns: {
      type: Array,
      default: function () {
        return []
      }
    },
    // 表格的数据
    dataSource: {
      type: Array,
      default: function () {
        return []
      }
    },
    pageSizes: {
      type: Array,
      default: function () {
        return [10, 15, 20, 25]
      }
    },
    totalCount: Number,
    sortChange: {
      type: Function,
      default: function () {
        return function () {}
      }
    },
    tableHeight: Number,
    rowClick: {
      type: Function,
      default: function () {
        return function () {}
      }
    },
    // 当用户选择勾选行checkbox时
    select: {
      type: Function,
      default: function () {
        return function () {}
      }
    },
    cellClassName: {
      type: Function,
      default: function () {
        return ''
      }
    },
    // 操作按钮
    operation: {
      type: Array,
      default: function () {
        return []
      }
    }
  },
  watch: {
    pageSize: 'changeSize'
  },
  methods: {
    changeSize: function () {
      // console.log('监听到了页数变化')
      this._data.dpageSize = this.pageSize
    },
    selectionChange: function (val) {
      this.$emit('selectionChange', val)
    },
    handleSizeChange: function (val) {
      this.$emit('pageSizeChange', val)
    },
    handleCurrentChange: function (val) {
      this.$emit('currentPageChange', val)
    },
    // 操作按钮的事件响应
    operationClick: function (index, row, id) {
      const data = this.operation
      // console.log(data)
      for (let i = 0; i < data.length; i++) {
        // 等于当前点击的按钮的时候触发事件
        if (id === data[i].id) {
          this.$emit(data[i].fn, index, row)
        }
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.el-table {
  width: 100%
}
</style>
